<template>
  <div class="main">
    <div class="container mt-5">
      <div class="jumbotron">
        <p class="lead" v-if="activationResult == 0">您的账号已经激活成功，可以正常使用了！</p>
        <p class="lead" v-else-if="activationResult == 1">无效操作，该账号已经激活过了！</p>
        <p class="lead" v-else-if="activationResult == 2">激活失败，您提供的激活码不正确！</p>
        <hr class="my-4">
        <p>
          系统会在
          <span id="seconds" class="text-danger">{{count}}</span>
          秒后自动跳转，您也可以点此<router-link class="text-primary" to="/" replace>链接</router-link>，手动跳转！
        </p>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import router from '@/router'
import User from '@/api/user'

const activationResult = ref(-1)

onMounted(async () => {
  // 获取当前路由对象携带的参数
  await User.activation(router.currentRoute.value.params.userId, router.currentRoute.value.params.code)
    .then((res) => {
      activationResult.value = res
    }
  )
  countDown()
})

let timer = null
const count = ref(10)

const countDown = () => {
  timer = setInterval(() => {
    count.value = count.value - 1
    if (count.value <= 0) {
      clearInterval(timer)
      timer = null
      // 跳转的页面写在此处
      router.replace({path: '/'})
    }
  }, 1000)
}

</script>
